<template>
  <div v-show="showReadHeaderBar" class="read-header-bar">
    <span @click.stop="tapBack" class="icon-back tap-item"></span>
    <slot></slot>
    <div class="tap-middle-padding"></div>
    <span @click.stop="tapHome" class="icon-list tap-item"></span>
    <span @click.stop="tapCollect" class="icon-add tap-item"></span>
  </div>
</template>

<script>
import {Mixin} from '../../utils/mixin.js'

export default {
  mixins: [Mixin],
  methods: {
    // 点击返回
    tapBack() {
      console.log('点击返回')
      this.$emit('onBack')
    },
    //回到主页
    tapHome() {
      console.log('回到主页')
      this.$emit('onHome')
    },
    //点击弹出/关闭 收藏列表
    tapCollect() {
      console.log('点击收藏列表层')
      this.$emit('onCollect')
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/style/color.scss";
@import "../../assets/style/mixin.scss";

.read-header-bar {
  background-color: $color-bg-mask-7;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  color: $color-text-f;
  .tap-middle-padding {
    flex: 1;
    -ms-flex: 1;
    -webkit-box-flex: 1;
  }
  .tap-item {
    color: $color-text-f;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: $font-size-24;
    @include center;
  }
}
</style>
